<template>
	<view class="content">
		<view class="header">
			<view class="tap">
				<view class="tap-item" :class="tap == 0 ? 'active':''" data-index="0" @click="changeTap">
					商城商品
				</view>
				<view class="tap-item" :class="tap == 1 ? 'active':''" data-index="1" @click="changeTap">
					热门资讯
				</view>
				<view class="tap-item" :class="tap == 2 ? 'active':''" data-index="2" @click="changeTap">
					藏友晒宝
				</view>
			</view>
		</view>
		<view class="list" v-if="tap==0">
			<view class="goods-list">
				<goodsItem class="goodsItem" :dataObject="item" v-for="(item,index) in goodsArr" :key="index"></goodsItem>
			</view>
			<noMoreData v-if="isBottom && goodsArr.length>0"></noMoreData>
		</view>
		<view class="list" v-if="tap==1">
			<informationItem v-for="(item,index) in articleArr" :key="index" :data="item"></informationItem>
		</view>
		<view class="list" style="margin-top: 114upx;" v-if="tap==2">
			<bbsItem v-for="(item,index) in trendArr" :key="index" :dataSource="item"></bbsItem>
		</view>
		
	</view>
</template>

<script>
	import goodsItem from '../../index/components/goodsItem.vue'
	import informationItem from '../../index/components/information-item.vue'
	import bbsItem from '../../index/components/bbs-item.vue'
	import noMoreData from '@/components/noMoreData/index.vue'
	import {
		getTrendsCollection,
		getArticleCollection
	} from '@/api/peopleHide.js'
	import {
		getCollectUserList
	} from '@/api/store.js';
	export default{
		components: {
			goodsItem,
			informationItem,
			bbsItem,
			noMoreData
		},
		data() {
			return {
				tap: 0,
				articleArr:[],
				trendArr:[],
				page:1,
				limit:15,
				goodsArr:[],
				isBottom:false
			}
		},
		onLoad() {
		  this.getDatasource()	
		},
		methods:{
			changeTap(e) {
				let index = e.currentTarget.dataset.index
				if (this.tap != index) {
					this.tap = index
					this.getDatasource()
				}
			},
			getDatasource(){
				if(this.tap == 0){
					this.getCollectUserList()
				}else if(this.tap == 1){//热门资讯
					this.getArticleCollection()
				}else{//晒宝
					this.getTrendsCollection()
				}
			},
			getCollectUserList(){//商城商品
				getCollectUserList({
					page: this.page,
					limit: this.limit
				}).then(res=>{
					
					if(res.data.length < this.limit){
						this.isBottom = true
					}
					if(this.page == 1){
						this.goodsArr = res.data
					}else{
						this.goodsArr.concat(res.data)
					}
					
				})
			},
			getTrendsCollection(){//晒宝资讯
				getTrendsCollection({}).then(res=>{
					this.trendArr = res.data
				})
			},
			getArticleCollection(){//热门资讯收藏
				getArticleCollection({}).then(res=>{
					this.articleArr = res.data
				})
			}
			
		},
		onReachBottom() {
			if(this.tap = 0 && !this.isBottom){
				this.page ++
				this.getCollectUserList();
			}
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f5f6;
	}
	
	.header {
		display: flex;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		flex-direction: column;
		align-items: center;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0px 4rpx 8rpx 0px rgba(236, 236, 236, 0.50);
		box-sizing: border-box;
	
		.tap {
			width: 100%;
			height: 94upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.tap-item {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				flex: 1;
				position: relative;
				font-size: 32upx;
				font-weight: 400;
			}
	
			.active {
				color: #0A77DE;
				font-weight: 500;
			}
	
			.active:after {
				position: absolute;
				content: '';
				bottom: 0;
				width: 50upx;
				background-color: #0A77DE;
				height: 2upx;
			}
		}
	}
	
	.list {
		margin-top: 94upx;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		box-sizing: border-box;
		padding-bottom: 30upx !important;
	}
	.goods-list{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.goodsItem{
		margin-right: 30rpx;
	}
	.goodsItem:nth-of-type(2n){
		margin-right: 0;
	}
</style>
